<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <div class="cil__base-block--form" *ngIf="addMinusService.validateForms.length === 0">
    <app-new-page-header
      [title]="'BIZ.ACQUIRER.OTHER.CURRENCY_CONVERSION' | i18n"
      [index]="-1"
      (addClick)="addMinusService.addItem($event)"
      (minusClick)="addMinusService.minusItem($event)"
    ></app-new-page-header>
  </div>

  <ng-container *ngFor="let validateForm of addMinusService.validateForms;let i=index;">
    <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
      <app-new-page-header
        [title]="currencyConversionTitle(i)"
        [index]="i"
        (addClick)="addMinusService.addItem($event)"
        (minusClick)="addMinusService.minusItem($event)"
      ></app-new-page-header>
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>{{'BIZ.ACQUIRER.OTHER.TRADE.MERCHANT_CURRENCY' | i18n}}</nz-form-label>
            <nz-form-control>
              <nz-select
                [nzAllowClear]="true"
                [nzShowSearch]="true"
                [nzServerSearch]="true"
                formControlName="srcCurrency"
                name="srcCurrency"
                (nzOnSearch)="searchSourceCurrency(i, $event)"
                (ngModelChange)="srcCurrencyChange(i, $event)"
              >
                <nz-option
                  *ngFor="let item of (sourceCurrencyOptionsObsArray[i] | async)"
                  [nzLabel]="item.value.code"
                  [nzValue]="item.value.code"
                  nzCustomContent
                >
                  <span>{{item.label}}</span>
                </nz-option>
              </nz-select>
              <nz-form-explain>
                <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('srcCurrency'), name:'srcCurrency'}"></ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>   
        </div>
  
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>{{'BIZ.ACQUIRER.OTHER.TRADE.CHANNEL_CURRENCY' | i18n}}</nz-form-label>
            <nz-form-control>
              <nz-select
                [nzAllowClear]="true"
                [nzShowSearch]="true"
                [nzServerSearch]="true"
                formControlName="dstCurrency"
                name="dstCurrency"
                (nzOnSearch)="searchCurrency(i, $event)"
                (ngModelChange)="dstCurrencyChange(i, $event)"
              >
                <nz-option
                  *ngFor="let item of (currencyOptionsObsArray[i] | async)"
                  [nzLabel]="item.value.code"
                  [nzValue]="item.value.code"
                  nzCustomContent
                >
                <span>{{item.label}}</span>
              </nz-option>
              </nz-select>
              <nz-form-explain>
                <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('dstCurrency'), name:'dstCurrency'}"></ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>   
        </div>
  
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>{{'BIZ.ACQUIRER.OTHER.TRADE.CONVERT_RATE' | i18n}}</nz-form-label>
            <div nz-row nzType="flex" nzAlign="top" nzJustify="space-between">
              <div nz-col [nzSpan]="10">
                <nz-form-control>
                  <nz-select
                    formControlName="selRate"
                    name="selRate"
                    (ngModelChange)="chooseExchangeRate(i, $event)"
                  >
                    <nz-option
                      *ngFor="let item of exchangeOptions"
                      [nzLabel]="item.label"
                      [nzValue]="item.value"
                    ></nz-option>
                  </nz-select>
                  <nz-form-explain>
                    <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('selRate'), name:'selRate'}"></ng-container>
                  </nz-form-explain>
                </nz-form-control>
              </div>
              <div nz-col [nzSpan]="10">
                <nz-form-control>
                  <input
                    *ngIf="chosenExchange[i]"
                    nz-input
                    [ngModel]="chosenExchange[i].selRate"
                    [ngModelOptions]="{standalone: true}"
                    [disabled]="isExchangeRateDisabledArray[i]"
                    (ngModelChange)="editCustomSelRate($event, i)"
                  />
                  <nz-form-explain *ngIf="chosenExchange[i] && validateForm.get('selRate').value==='FIXED'">
                    <span>{{'BIZ.ACQUIRER.OTHER.TRADE.REFERENCE_VALUE'| i18n}}: {{bestSelRateArray[i]}}</span>
                  </nz-form-explain>
                  <input *ngIf="!chosenExchange[i]" nz-input />
                </nz-form-control>
              </div>
            </div>
          </nz-form-item> 
        </div>
  
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>Mark Up</nz-form-label>
            <nz-form-control>
              <nz-input-group nzAddOnAfter="%">
                <input formControlName="markup" nz-input />
              </nz-input-group>
              <nz-form-explain>
                <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('markup'), name:'markup'}"></ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>   
        </div>
      </div>
    </form>
  </ng-container>
  
  <div class="cil__base-block--form">
    <app-detail-header [title]="'BIZ.ACQUIRER.OTHER.SECRET_KEY_CONFIG' | i18n" [hideIcon]="true"></app-detail-header>
    <form nz-form [formGroup]="accessValidateForm">

    <div nz-row [nzGutter]="24">

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <div nz-row nzType="flex" nzAlign="middle" style="height: 40px;">
            <div nz-col nzSpan="24">
              <label nz-checkbox [ngModel]="isMerchantAccess" [ngModelOptions]="{standalone: true}" (ngModelChange)="handleMerchantAccessCheck($event)" nzValue="0">{{'BIZ.ACQUIRER.OTHER.TRADE.MERCHANT_ACCESS' | i18n}}</label>
            </div>
          </div>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <div [class]="cashier.nzChecked ? 'access-input_show' : 'access-input_hide'" nz-row nzType="flex" nzAlign="middle">
            <div nz-col nzSpan="6">
              <label #cashier  nz-checkbox [ngModelOptions]="{standalone: true}" [ngModel]="isAcquirerAccess$ | async" (ngModelChange)="handleAcquirerAccessCheck($event)" nzValue="1">{{'BIZ.ACQUIRER.OTHER.TRADE.ACQUIRER_ACCESS' | i18n}}</label>
            </div>

            <ng-container *ngIf="cashier.nzChecked">
              <div nz-col nzSpan="10">
                <nz-form-item>
                  <nz-form-control>
                    <input
                      #acquirerAccessInput
                      nz-input
                      formControlName="acquirerAccessKey"
                    />
                    <nz-form-explain>
                      <ng-container *ngTemplateOutlet="errorTpl;context:{control:accessValidateForm.get('acquirerAccessKey'), name:'acquirerAccessKey'}"></ng-container>
                    </nz-form-explain>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col nzSpan="6" nzOffset="2">
                <button [disabled]="isAcquirerAccessDisEditable" nz-button (click)="genKey(accessModeEnum.Acquirer)">{{'BIZ.ACQUIRER.OTHER.TRADE.GENERATE_KEY' | i18n}}</button>
              </div>
            </ng-container>
          </div>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <div [class]="system.nzChecked ? 'access-input_show' : 'access-input_hide'" nz-row nzType="flex" nzAlign="middle">
            <div nz-col nzSpan="6">
              <label #system nz-checkbox [ngModelOptions]="{standalone: true}" [ngModel]="isNodeAccess$ | async" (ngModelChange)="handleNodeAccessCheck($event)" nzValue="2">{{'BIZ.ACQUIRER.OTHER.TRADE.NODE_ACCESS' | i18n}}</label>
            </div>
            <ng-container *ngIf="system.nzChecked">
              <div nz-col nzSpan="10">
                <nz-form-item>
                  <nz-form-control>
                    <input
                      #acquirerAccessInput
                      nz-input
                      formControlName="nodeAccessKey"
                    />
                    <nz-form-explain>
                      <ng-container *ngTemplateOutlet="errorTpl;context:{control:accessValidateForm.get('nodeAccessKey'), name:'nodeAccessKey'}"></ng-container>
                    </nz-form-explain>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col nzSpan="6" nzOffset="2">
                <button nz-button [disabled]="isNodeAccessDisEditable" (click)="genKey(accessModeEnum.Node)">{{'BIZ.ACQUIRER.OTHER.TRADE.GENERATE_KEY' | i18n}}</button>
              </div>
            </ng-container>
          </div>
        </nz-form-item>
      </div>
    </div>
    </form>
  </div>

  <form *ngIf="!pageService.isTradeEdit" class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <app-detail-header [title]="'BIZ.ACQUIRER.OTHER.MERCHANT_FEATURE_CONFIG' | i18n" [hideIcon]="true"></app-detail-header>
    <nz-form-item>
      <nz-form-label>{{'BIZ.ACQUIRER.OTHER.TRADE.MULTI_CURRENCIES_SUPPORTED' | i18n}}</nz-form-label>
      <nz-form-control>
        <nz-switch formControlName="multiTransCurrConfig"></nz-switch>
      </nz-form-control>

      <!--
      <nz-form-label>{{'BIZ.ACQUIRER.OTHER.TRADE.RISK_CONTROL_SUPPORTED' | i18n}}</nz-form-label>
      <nz-form-control>
        <nz-switch formControlName="isSupportRisk"></nz-switch>
      </nz-form-control>
      -->
      <nz-form-label>{{'BIZ.ACQUIRER.OTHER.TRADE.POST_RISK_CONTROL_SUPPORTED' | i18n}}</nz-form-label>
      <nz-form-control>
        <nz-switch formControlName="isSupportPostRisk"></nz-switch>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('pattern'); else fifth">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('min'); else sixth">{{ errorTips[name]?.min }}</ng-container>
    </ng-template>
    <ng-template #sixth>
      <ng-container *ngIf="control.hasError('max'); else seventh">{{ errorTips[name]?.max }}</ng-container>
    </ng-template>
    <ng-template #seventh>
      <ng-container *ngIf="control.hasError('existCurrConvert');">{{ errorTips[name]?.existCurrConvert}}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>
